import React, {PureComponent} from 'react';
import { Form, Input, Button, Select, Divider, Cascader } from 'antd';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {message} from "antd/lib/index";
import styles from './goodsManage.less';

const { Option } = Select;

@connect(state => ({
    submitting: state.goodsManage.loading,
}))
@Form.create()
export default class ChooseGoodsCategory extends PureComponent {

    state = {
        loading: false,
        goodsCategory: [],
        parentNode: ''
    };

    componentDidMount() {
        const {data} = this.props;
        const {dispatch} = this.props;
        dispatch({
            type: 'goodsCategory/findParentNode',
            payload: {cat_id: data.cat_id,
            type:'all'},
            callback: (response) => {
                if (response.result === 0) {
                    this.setState({
                        goodsCategory: response.resultData.parentCategoryList
                    });

                } else {
                    message.success('失败');
                }
            }
        });
        dispatch({
            type: 'goodsCategory/findParentId',
            payload: {cat_id: data.cat_id},
            callback: (response) => {
                if (response.result === 0) {
                    this.setState({
                        parentNode: response.resultData.pNode
                    });

                } else {
                    message.success('失败');
                }
            }
        });

    }

    onValidateForm = () => {
        const {dispatch} = this.props;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                dispatch({
                    type: 'goodsManage/keepData',
                    payload: {
                        ...values,
                        goodsCategory:this.state.goodsCategory
                    },
                });
                dispatch(routerRedux.push('/goods/addGoods/goodsGI'));
            }

        });
    }

    stepSubmit = (e) => {
        const {dispatch, data} = this.props;
        this.props.form.validateFieldsAndScroll((err, values) => {
            console.log("values",values)
            console.log("====")
            if (!err) {
                let user_id = '';
                const userInfoState = sessionStorage.getItem("userInfoState");
                if (userInfoState !== null) {
                    const {userInfo} = JSON.parse(userInfoState);
                    user_id = userInfo.user_id;
                }
                dispatch({
                    type: 'goodsManage/keepData',
                    payload: {
                        ...values,
                    },
                    callback: (response) => {
                        if (response){
                            const editType = data.editType;
                            this.props.goodsCatSubmit(editType,user_id,values);
                        }
                    }
                });
            }
        });
    }

    render() {
        const { formItemLayout ,data} = this.props;
        let parent_node = data.editType === 'add' ? [] : eval("["+this.state.parentNode+"]");
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const isDisplay=data.editType==='add'?true:false;
        return (
            <div>
                <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
                    <Form.Item
                        {...formItemLayout}
                        label={<span>商品分类</span>}
                    >
                        {getFieldDecorator('category',{
                            initialValue: parent_node || [],
                            rules: [{
                                type: "array",
                                required: true, message: '请选择商品分类',
                            }],
                        })(
                            <Cascader options={this.state.goodsCategory} changeOnSelect  />
                        )}
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            xs: { span: 24, offset: 0 },
                            sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
                        }}
                        label=""
                    >
                        <Button type="primary" onClick={this.onValidateForm}>
                            下一步
                        </Button>
                        <Button type="default" onClick={this.stepSubmit} disabled={isDisplay} style={{marginLeft:'8px'}}>保存</Button>
                    </Form.Item>
                </Form>
            <Divider style={{ margin: '40px 0 24px' }} />
        </div>
    )};
};
